<template>
	<div class="layout-demo-1-vue">
		<Layout>
			<Sider>
				<div v-height="200" class="person" align="left">
					<br>
					<Form :readonly="true">
					 <FormItem label="用户名" prop="username">{{login.username}}</FormItem>
					   <FormItem label="手机号" prop="phone" >{{login.phone}}</FormItem>
					</Form>
					<br>
				</div>
				<div v-height="560" class="treemenu">
					<Tree class="h-tree-show-selected"  ref="demo" @select="select" :option="param" v-model="value"></Tree>
				</div>
			</Sider>
			<Layout>
				<Content>
					<router-view :key="$route.fullPath"></router-view>
				</Content>
			</Layout>
		</Layout>
	</div>

</template>

<script>
	import echarts from '../components/chart.vue'
	export default {
		data() {
			let list = []
			return {
				login: {
					username: JSON.parse(sessionStorage.getItem("user")).userName,
					phone: JSON.parse(sessionStorage.getItem("user")).userPhone,
				},
				value: null,
				param: {
					keyName: 'id',
					parentName: 'parent',
					titleName: 'title',
					dataMode: 'list',
					datas: list
				},
			}
		},
		methods: {
			select(data) {
				const that = this;
				if (data.children == null) {
					that.$axios.get('/api' + '/index/xjds/' + data.id).then(function(resp) {
						console.log(resp.data.data)
						var t = JSON.stringify(resp.data.data);
						var namesss = data.title;
						sessionStorage.setItem("t",t);
						sessionStorage.setItem("namesss",namesss);
					that.$router.push("/menu/table?name="+data.title);
					})
				}
				if (data.children != null) {
					that.$axios.get('/api' + '/index/root/' + data.id).then(function(resp) {
						var c = JSON.stringify(resp.data.data.companyCount);
						var x = JSON.stringify(resp.data.data.xjdCount);
						sessionStorage.removeItem("c");
						sessionStorage.removeItem("x");
						sessionStorage.setItem("c", c);
						sessionStorage.setItem("x", x);
						that.$router.push("/menu/chart?id="+data.id);

					})
				};
			},
		},
		created() {
			const that = this;
			that.$axios.get('/api' + '/index/companys/').then(function(resp) {
				console.log(resp);
				for (var i = 0; i < resp.data.data.length; i++) {
					var sd = {
						id: resp.data.data[i].companyId,
						title: resp.data.data[i].companyName,
						treeIcon: 'h-icon-home'
					};
					that.param.datas.push(sd);
					for (var j = 0; j < resp.data.data[i].sons.length; j++) {
						that.param.datas.push({
							id: resp.data.data[i].sons[j].companyId,
							title: resp.data.data[i].sons[j].companyName,
							parent: resp.data.data[i].sons[j].parentsId
						});
					}
				}

			});

		}
	}
</script>

<style>
	.h-tree-show-desc,
	.selected {
		font-size: 20px;
	}

	.h-tree {
		text-align: left;

	}
	.h-tree.h-tree-theme-item-selected.h-tree-single .h-tree-show-selected .h-tree-show-desc {
		background: #45b984;
	}
</style>

<style lang="less" scoped="scoped">
	/deep/ .h-form-readonly .h-form-item .h-form-item-wrap{
		line-height: 36px;
	}
	
	/deep/ .h-form{
		.h-form-item-label,.h-form-item-content{
			font-size: 18px;
		}
	}
	.layout-demo-1-vue {
		margin: 0 60px;

		.h-layout-content {
			min-height: 120px;
			text-align: center;
		}

		.h-layout-sider {
			text-align: center;
		}

		.treemenu,
		.person {
			border: 3px solid #CCCCCC;
			border-radius: 5px;
		}

		.treemenu {
			border-bottom: none;
		}

		.person {
			margin-bottom: 2px;
			font-size: 18px;
		}

		.sd {
			width: 55%;
			margin-left: 10px;
		}
	

	}
</style>
